<!--#
layout("/layouts/platform.html"){
#-->
<div id="app"  v-cloak>
    <!--<div class="head">
        <div class="headone"><i class="el-icon-menu"></i>
            <span v-if="operation=='rwfp'">任务分配</span>
            <span v-else-if="operation=='rwrl'">任务认领</span>
            <span v-else-if="operation=='rwch'">任务撤回</span>
            <span v-else>这是什么菜单？</span>
        </div>
    </div>-->
    <el-row class="header navbar bg-white">
        <div class="btn-group tool-button" style="line-height: 50px;">
            样品编号或名称：<el-input placeholder="样品编号或名称" v-trim v-model="pageForm.searchKeyword"  size="mini" style="width:180px;" clearable></el-input>
            <el-button slot="append" icon="el-icon-search" size="mini" @click="doSearch" circle></el-button>
        </div>
    </el-row>
    <el-row class="el-table-container">
        <el-table :data="tableData" @sort-change='pageOrder' row-key="id" height="520"  border size="small" header-align="center"  style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column fixed="left" prop="userOnline" label="操作" width="80" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-dropdown @command="dropdownCommand">
                        <el-button size="mini"><i class="ti-settings"></i><span class="ti-angle-down"></span></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <!--#if(@shiro.hasPermission("bus.rwgl.tofp")){#-->
                            <template v-if="operation=='rwfp'">
                                <el-dropdown-item divided :command="{type:'tofp',id:scope.row.id,ypbh:scope.row.ypbh}">分配</el-dropdown-item>
                            </template>
                            <!--#}#-->
                            <!--#if(@shiro.hasPermission("bus.rwgl.torl")){#-->
                            <template v-if="operation=='rwrl'">
                                <el-dropdown-item divided :command="{type:'torl',id:scope.row.id,ypbh:scope.row.ypbh}">认领</el-dropdown-item>
                            </template>
                            <!--#}#-->
                            <!--#if(@shiro.hasPermission("bus.rwgl.toch")){#-->
                            <template v-if="operation=='rwch'">
                                <el-dropdown-item divided :command="{type:'toch',id:scope.row.id,ypbh:scope.row.ypbh}">撤回</el-dropdown-item>
                            </template>
                            <!--#}#-->
                            <el-dropdown-item  :command="{type:'detail',id:scope.row.id}">详情</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
            <el-table-column fixed="left" sortable="custom" prop="ypbh" label="样品编号" width="120px;" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column fixed="left" sortable="custom" prop="bgbh" label="报告编号" width="150px;" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column v-if="operation=='rwch'"  prop="nextspr" label="编制人" width="150px;" header-align="center" show-overflow-tooltip></el-table-column>

            <el-table-column prop="lczt" label="检验状态" width="80px;" header-align="center"  show-overflow-tooltip>
                <template slot-scope="scope" ><span :class="'statusCss-'+scope.row.lczt"><i :class="'el-icon-'+scope.row.lczt"/>{{getDict(scope.row.lczt,allMap.lcztMap)}}</span></template>
            </el-table-column>
            <el-table-column prop="lzzt" label="流转状态" width="120px;" header-align="center"  show-overflow-tooltip>
                <template slot-scope="scope" >
                    <span :class="'lzstatusCss-'+scope.row.lzzt"><i :class="'lzel-icon-'+scope.row.lzzt"/>{{getDict(scope.row.lzzt,allMap.lzztMap)}}</span>
                    <span v-if="scope.row.lzzt<3"><span v-if="scope.row.status=='0'">(待接收)</span>
                    <span v-if="scope.row.status=='1'">(已接收)</span>
                    <span v-if="scope.row.status=='-1'">(已拒收)</span></span></template>
                </template>
            </el-table-column>
            <el-table-column sortable="custom"  prop="ypmc" label="产品名称" min-width="150px;" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="jylx" label="检验类别" width="100px;" header-align="center" align="center" show-overflow-tooltip>
                <template slot-scope="scope" >{{getDict(scope.row.jylx,allMap.jylxMap)}}</template>
            </el-table-column>
            <el-table-column sortable="custom" prop="jyks" label="检验部门" width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="wtdw" label="委托单位" min-width="180px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <!--<el-table-column prop="ggxh" label="规格型号" width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="scrqpc" label="原编号/生产日期" width="120px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sb" label="商标" width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>-->
            <el-table-column sortable="custom" prop="wcqx" label="完成期限" width="100px;" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="" label="剩余时间" min-width="100px;" header-align="center" align="center" show-overflow-tooltip>
                <template slot-scope="scope" ><span :id="'foot'+scope.$index">{{getDay(scope.row.wcqx,scope.$index)}}</span></template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row class="el-pagination-container">
        <el-pagination @size-change="pageSizeChange" @current-change="pageNumberChange" :current-page="pageForm.pageNumber" :page-sizes="[10, 20, 30, 50]"
                :page-size="pageForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageForm.totalCount">
        </el-pagination>
    </el-row>
    </el-dialog>
    <el-drawer :wrapperClosable="false" title="详情" :visible.sync="drawer" direction="rtl" size="80%" @opened="openIframe" destroy-on-close>
        <iframe id="iframeDetail"  src="" width="100%" height="100%" frameborder="0" marginheight="0" ></iframe>
    </el-drawer>

    <el-dialog :close-on-click-modal="false" title="任务分配" :visible.sync="fpDialogVisible" width="40%">
        <el-form :model="formData" ref="fpForm"  size="mini" label-width="100px" >
            <el-form-item prop="ypbh" label="样品编号">
                <el-link type="primary" size="mini" @click="dropdownCommand({type:'detail',id:formData.id})">{{formData.ypbh}}</el-link>
            </el-form-item>
            <el-form-item prop="nextsprIds" label="报告编制人员">
                <el-cascader v-model="formData.nextsprIds" :options="allMap.userOptions" :props="{ multiple: true }" ref="nextsprCascader"   style="width:100%;"></el-cascader>
            </el-form-item>
            <el-form-item prop="jyryIds" label="样品检验人员">
                <el-cascader v-model="formData.jyryIds" :options="allMap.userOptions" :props="{ multiple: true }" ref="jyryCascader"  style="width:100%;"></el-cascader>
            </el-form-item>
            <el-form-item prop="spyj" label="意见">
                <el-input maxlength="200"  v-trim v-model="formData.spyj" type="textarea" size="mini" rows="3"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer"><el-button @click="fpDialogVisible = false">取 消</el-button><el-button type="primary" @click="dofp">分 配</el-button></span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            var allMap = {jylxMap:${jylxMap},userOptions:{},lcztMap:${lcztMap},lzztMap:${lzztMap}};
            return {
                allMap:allMap,
                tableData: [],
                menuOptions: [],
                pageForm: {lczt:'${lczt}'},
                multipleSelection: [],
                operation:'${operation}',
                drawer: false,
                deltailURL:"",
                fpDialogVisible:false,
                formData:{operation:'${operation}'}
            }
        },
        methods: {
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/rwgl/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },
            getDict: function (val,map) {
                if (val!= null && val!=undefined &&val!="" &&val!="null" &&val!="undefined" && map!=null && map !=undefined){
                    var str = val.split(",");
                    var strname="";
                    for (var a=0;a<str.length;a++){
                        strname+=map[str[a]];
                        if(strname == null){
                            alert(1)
                        }
                        if(a<(str.length-1)){
                            strname+="/";
                        }
                    }
                    return strname;
                }
                return "";
            },
            dropdownCommand: function (command) {
                var self = this;
                if ("tofp" == command.type) {
                    self.formData= {};
                    sublime.showLoadingbar();//显示loading
                    $.post(base + "/platform/bus/rwgl/tofp/"+command.id, {}, function (data) {
                        sublime.closeLoadingbar();//关闭loading
                        if (data.code == 0) {
                            self.formData.id = command.id;//加载后台表单数据
                            self.formData.ypbh = command.ypbh;
                            self.allMap.userOptions=data.data.userOptions;
                            if(data.data.users){
                                self.formData.nextsprIds = data.data.users.split(",");
                                self.formData.jyryIds = data.data.users.split(",");
                                self.formData=JSON.parse(JSON.stringify(self.formData));
                            }
                            self.fpDialogVisible = true;//打开窗口
                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }, "json");
                }
                if ("torl" == command.type) {
                    self.formData= {};
                    //window.location.href="/platform/bus/rwgl/torl/"+command.id;
                    //补充流程信息
                    self.formData.jbxxId = command.id;
                    self.formData.ypbh = command.ypbh;
                    self.formData.id = "";
                    self.formData.lczt = "2";
                    self.formData.nextspr = "${username}";
                    self.formData.nextsprIds = "${userId}";
                    self.formData.jyry = "${username}";
                    self.formData.jyryIds = "${userId}";
                    self.formData.spyj = "";
                    self.formData.operation = self.operation;
                    self.$confirm('此操作将认领 ' + command.ypbh, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            callback: function (a, b) {
                                if ("confirm" == a) {//确认后再执行
                                    sublime.showLoadingbar();//显示loading
                                    $.post(base + "/platform/bus/rwgl/rwglDo", self.formData, function (data) {
                                        sublime.closeLoadingbar();//关闭loading
                                        if (data.code == 0) {
                                            self.$message({
                                                message: data.msg,
                                                type: 'success'
                                            });
                                            self.doSearch();//查询是带条件的,加载新建用户选择的数据
                                        } else {
                                            self.$message({
                                                message: data.msg,
                                                type: 'error'
                                            });
                                        }
                                    }, "json");
                                }
                            }
                    });
                }
                if ("toch" == command.type) {
                    //window.location.href="/platform/bus/rwgl/toch/"+command.id;
                    //补充流程信息
                    self.formData= {};
                    self.formData.jbxxId=command.id;
                    self.formData.ypbh = command.ypbh;
                    self.formData.id="";
                    self.formData.lczt="3";
                    self.formData.spyj="";
                    self.formData.operation = self.operation;
                    self.$confirm('此操作将撤回 ' + command.ypbh, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            callback: function (a, b) {
                                if ("confirm" == a) {//确认后再执行
                                    sublime.showLoadingbar();//显示loading
                                    $.post(base + "/platform/bus/rwgl/rwglDo", self.formData, function (data) {
                                        sublime.closeLoadingbar();//关闭loading
                                        if (data.code == 0) {
                                            self.$message({
                                                message: data.msg,
                                                type: 'success'
                                            });
                                            self.doSearch();//查询是带条件的,加载新建用户选择的数据
                                        } else {
                                            self.$message({
                                                message: data.msg,
                                                type: 'error'
                                            });
                                        }
                                    }, "json");
                                }
                            }
                    });

                }
                if ("detail" == command.type) {
                    this.drawer=true;
                    this.deltailURL="/platform/bus/ypxx/jbxx/detail/"+command.id;
                }
            },
            openIframe:function(){
                $("#iframeDetail").attr("src",this.deltailURL);
            },
            handleClose: function() {
                this.drawer=false;
            },
            dofp:function(){
                var self = this;
                if(nONull(self.formData.nextsprIds)){
                    self.formData.nextspr = "";
                    for(var i =0 ;i<self.formData.nextsprIds.length;i++){
                        self.formData.nextspr += self.$refs['nextsprCascader'].getCheckedNodes()[i].label;
                        if(i<(self.formData.nextsprIds.length -1 )){
                            self.formData.nextspr +=",";
                        }
                    }
                }else{
                    self.$message({message: "请选择报告编制人员!",type: 'warning'});
                    return false;
                }
                if(nONull(self.formData.jyryIds)){
                    self.formData.jyry = "";
                    for(var i =0 ;i<self.formData.jyryIds.length;i++){
                        self.formData.jyry += self.$refs['jyryCascader'].getCheckedNodes()[i].label;
                        if(i<(self.formData.jyryIds.length -1 )){
                            self.formData.jyry +=",";
                        }
                    }
                }else{
                    self.$message({message: "请选择样品检验人员!",type: 'warning'});
                    return false;
                }
                self.formData.jyryIds=self.formData.jyryIds.join(",");
                self.formData.nextsprIds=self.formData.nextsprIds.join(",");
                //补充流程信息
                self.formData.jbxxId=self.formData.id;
                self.formData.id="";
                self.formData.lczt="2";
                /*if(!nONull(self.formData.spyj)){
                    //self.formData.spyj="任务分配";
                }*/
                self.formData.operation = self.operation;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/rwgl/rwglDo", self.formData, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        self.fpDialogVisible = false;
                        self.doSearch();//查询是带条件的,加载新建用户选择的数据
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            handleSelectionChange: function (val) {
                this.multipleSelection = val;
            },
            getDay(day,index){
                if(day){
                    const today = new Date();
                    const inputDate = new Date(day);
                    const diffTime = inputDate-today;
                    const diffDays = Math.abs((diffTime / (1000 * 60 * 60 * 24)).toFixed(0));
                    if(diffTime<0&&diffDays>0){
                        $("#foot"+index).css("color","red");
                        return "逾期："+diffDays+"天";
                    }else{
                        return "剩余："+diffDays+"天";
                    }
                }else{
                    return "";
                }
            }
        },
        created: function () {
            this.doSearch();
        }
    });

    function nONull(val){
        if (val!= null && val!=undefined &&val!="" &&val!="null" &&val!="undefined" ){
            return true;
        }else{
            return false;
        }
    }
</script>
<!--#
}
#-->
